<template>
  <div v-loading="loadings" class="produceBox">
    <div class="cont">
      <Statistics :title-data="titleData" />
      <Search :options="Searchoptions" />
      <div class="tablebox">
        <h1>页面生成列表<span>已生成页面 {{ total }} 个，其中一级页面 {{ one }} 个，二级页面 {{ two }} 个</span></h1>
        <el-button class="addBtn" type="primary" @click="add">新增页面生成</el-button>
        <el-button class="addBtn" @click="openUrl">跳转中粮MES</el-button>
        <Tables
          :table-data="tableData"
          :total="total"
          @tableClick="tableClick"
          @pagesChange="getList"
          @downLoad="(data,type)=>saveTemp(data,type,'正在下载文件')"
        />
      </div>
    </div>
    <div
      v-if="popType == 'toChange' || popType == 'status' || popType == 'news'"
      class="backBox"
      @click.self="popType = false"
    >
      <Popup :data.async="popData" :type="popType" @close="popType = false" @submit="toSubmit" />
    </div>
  </div>
</template>

<script>
import Tables from './tables.vue'
import Popup from './itemPop.vue'
import Statistics from './statistics.vue'
import Search from './search.vue'
import { mesPageConfig, genCustom, mesTemplateConfig, getDict } from '@/api/produce/mesPage'
export default {
  components: { Tables, Popup, Statistics, Search },
  data() {
    return {
      tableData: [
        // {
        //     createTime: '2024-12-26 10:00:00',
        //     id: '1',
        //     pageLink: 'http://dev.dppsmart.com:8080/#/production_sl',
        //     pageType: '非一级页面',
        //     status: 2,
        //     templatePage: 'L002',
        //     target: '',
        //     targetFunction1: '生产管理',
        //     targetFunction2: '生产执行',
        //     targetFunction3: '清理工作台',
        //     pageTitle: '-',
        //     templateUrl: '文件.xlsx'
        // }
      ],
      titleData: [
        {
          color: '#000',
          name: '总页面数',
          keys: 'totalPage',
          value: '0',
          status: '0'
        },
        {
          color: '#F64671',
          name: '已自动生成',
          keys: 'alreadyGenPage',
          value: '0',
          status: '1'
        },
        {
          color: '#74C9D2',
          name: '待自动生成',
          keys: 'willGenPage',
          value: '0',
          status: '2'
        },
        {
          color: '#5DBAFD',
          name: '已手动开发',
          keys: 'alreadyDevPage',
          value: '0',
          status: '3'
        },
        {
          color: '#C098FB',
          name: '待手动开发',
          keys: 'willDevPage',
          value: '0',
          status: '4'
        }
      ],
      Searchoptions: [
        {
          type: 'select',
          label: '页面路径',
          porp: 'target',
          options: [{ label: '请手动配置下拉选项', value: 0 }]
        },

        {
          type: 'select',
          label: '页面类型',
          porp: 'pageType',
          options: [
            { label: '一级页面', value: 0 },
            { label: '非一级页面', value: 1 }
          ]
        },

        {
          type: 'select',
          label: '模板程序',
          porp: 'templatePage',
          options: [
            { label: 'L002', value: 'L002' },
            { label: 'L003', value: 'L003' },
            { label: 'L004', value: 'L004' },
            { label: 'L005', value: 'L005' }
          ]
        }
      ],
      popType: '',
      popData: {},
      total: 0,
      one: 0,
      two: 0,
      loadings: false,
      pageData: {
        current: 1,
        size: 10
      }
    }
  },
  mounted() {
    this.getList({})
  },

  methods: {
    add() { // 新增页面
      this.popData = {}
      this.popType = 'news'
    },
    openUrl() {
      console.log('跳转链接')
      window.open('http://dev.dppsmart.com:8015/', '_blank')
    },
    async getCount(num) {
      const res = await getDict({ pages: 1, size: 50 })
      const data = res.content[1].dictDetails
      console.log(res.content)
      console.log(data)

      this.titleData.forEach(i => {
        const totalPage = data.filter(k => {
          if (i.keys === k.label) {
            i.value = k.value
          }
          if (k.label === 'totalPage') {
            return true
          }
        })
        if (i.keys === 'alreadyGenPage') {
          i.value = num
        }

        if (i.keys === 'willGenPage') {
          i.value = +totalPage[0].value - num
        }
      })
      this.loadings = false
    },
    async saveTemp(data, popType, text) { // 获取模板配置后根据条件选择是否下载
      const { targetFunctionId1, targetFunctionId2, targetFunctionId3, templatePage } = data
      const res = await mesTemplateConfig({ size: 2000, targetFunctionId1, targetFunctionId2, targetFunctionId3, templatePage })
      popType = popType === 'news' ? '2' : '0'
      console.log(res)
      genCustom(res.content, data.templatePage, popType).then(res => { // 生成并下载模板文件
        this.getList(this.pageData)
        if (res.size !== 0) {
          this.$message.success(text)
          const blob = new Blob([res])
          const a = document.createElement('a')
          const url = window.URL.createObjectURL(blob)
          a.href = url
          a.download = data.pageTitle + '.rar'
          a.click()
          window.URL.revokeObjectURL(url)
        }
        if (res.size === 0) {
          this.$message.success('页面编辑成功')
        }
      })
    },

    async toSubmit(resources, type) { // 提交生成信息
      // console.log(resources, type);
      this.popType = false
      const reqtype = type === 'news' ? 'post' : 'put'
      const res = await mesPageConfig(resources, reqtype)
      console.log(res, '提交生成信息')
      this.saveTemp(resources, type, '页面生成成功,正在下载')
    },

    async getList(pages) { // 获取模板列表
      this.pageData = pages
      this.loadings = true
      const res = await mesPageConfig(pages)
      console.log(res, '列表数据')
      this.tableData = res.content
      this.tableData.forEach(item => {
        item.target = item.targetFunction1 + ' / ' + item.targetFunction2 + (item.targetFunction3 ? (' / ' + item.targetFunction3) : '')
      })
      this.total = res.totalElements
      this.one = this.tableData.reduce((p, n) => {
        if (n.pageType === 1) {
          return p + 1
        } else {
          return p
        }
      }, 0)
      this.two = this.tableData.reduce((p, n) => {
        if (n.pageType === 2) {
          return p + 1
        } else {
          return p
        }
      }, 0)

      this.getCount(res.totalElements)
    },

    tableClick(data, type) { // table 打开弹窗
      // console.log(data, type, 'table点击');
      if (type === 'del') {
        this.$confirm(data.pageTitle, '即将删除此页面', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          mesPageConfig([data.id], 'delete').then(res => {
            this.$message.info('删除成功')
            this.getList(this.pageData)
          })
        }).catch(() => { })
      } else {
        this.popType = type
        this.popData = data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.produceBox {
    width: 100%;
    padding: 2%;
    // padding-bottom: 0;
    border-radius: 5px;
    background-color: #F0F2F5;

    .cont {
        padding-top: 1px;
        // background: #fff;
        height: 83vh;
    }

    .tablebox {
        padding: 1px;
        background-color: #fff;
        height: 690px;
        span{
            font-size: 14px;
            margin-left: 20px;
        }
        h1 {
            margin: 30px 0 0 40px;
            font-size: 18px;
            font-weight: 400;
            height: 50px;
            width: 50%;
            float: left;
        }

        .addBtn {
            float: right;
            margin-right: 30px;
            height: 36px;
            margin-top: 22px;
        }
    }

    .backBox {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 333;
        background-color: rgba(0, 0, 0, .4);
        width: 100%;
        height: 100vh;
    }
}
</style>
